<template>
	<view class="demo">
<view class="demo_tops">
				<view class="demos_zuo" @click="returns">
					<span class="icon-return"></span>
				</view>
					<p style="height: 5vw;font-size: 4vw;line-height: 10vw;margin-left: 30vw;">充值金额</p>
			</view>
		<view class="cz_top">
			<view class="top">
				<h4 style="font-size: 4vw;line-height: 7vw;margin-left: 3vw;">充值方式</h4>

			</view>
			<view class="btn" @click="show = true">
				<view class="btn_left">
					<span :class="saves=='支付宝'?'icon-zfb':'icon-wx'" style="font-size: 10vw;margin-left: 3vw;"></span>
				</view>
				<view class="btn_right">
					<h4 style="font-size: 4vw;">{{saves}}</h4>
					<p style="font-size: 3vw;color: #ccc;">单笔限额 5-10000 元</p>
				</view>
			</view>
		</view>
		<view class="cz_center">
			<view class="top">
				<h4 style="font-size: 4vw;line-height: 7vw;margin-left: 3vw;">充值金额</h4>

			</view>
			<view class="chongzhi">
				<p style="margin-left: 3vw;">￥ </p><input type="text" :value="list" placeholder="请输入充值金额" />
				<p style="font-size: 3vw;">余额 :￥ <span style="color: aqua;">6.00</span></p>
			</view>
			<view class="czs_btn" style="margin-top: 5vw;">
				<view :class="itemActive===index?'rechs activ':'rechs'" v-for="(item,index) in recharge" :key="index"
					@click="chongzhi(index)">
					{{item}}元
				</view>
			</view>
		</view>
		<view class="cz_btns" style="line-height: 6vw;">
			<h4 style="margin-left: 3vw;font-size: 4vw;margin-top: 5vw;">注意事项:</h4>
			<p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">1.单笔充值限额为5-100元。</p>
			<p style="margin-left: 3vw;font-size: 3vw;color: #ccc;">2.禁止未成年人充值消费。</p>
		</view>
		<button style="width: 100%;height: 10vw;background-color:#2f3043 ;
		color: #ffffff;line-height: 10vw;border-radius: 5vw;" @click="chong">充值</button>
		<u-popup :show="show" @close="close" @open="open">
			<view class="tan">
				<h3>支付方式</h3>
			</view>
			<view class="danxuan" style="font-size: 5vw; text-align: center;line-height: 10vw;">
				<view v-for="(item,index) in radiolist1" :key="index" @click="items(index)"
					:class="zfbIndex==index?'zfbs':'zfb'">
					<span :class="item.icons" style="font-size: 4vw;"></span> {{item.name}}
				</view>
			</view>
			<view class="cz_btn">
				<button style="margin-top: 3vw;" @click="comes">选择</button>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				zfbIndex: 0,
				radiolist1: [{
						name: '支付宝',
						disabled: true,
						icons: "icon-zfb",
						class: 'zfbs'
					},
					{
						name: '微信',
						disabled: false,
						icons: "icon-wx",
						class: 'zfb'
					},

				],
				saves: '支付宝',
				recharge: [
					"100",
					"200",
					"500",
					"1000",
					"2000",
					"3000",
				],
				itemActive: 0,
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '支付宝',
				list:"100"
			}
		},
		methods: {
returns(){
			uni.navigateBack()
			},
			items(index) {
				this.zfbIndex = index
				this.saves = this.radiolist1[index].name
				// console.log(this.saves)
			},
			chong() {
				// console.log(this.itemActive)
				let data = {
					money: this.recharge[this.itemActive],
					// money: 0.01,
					domain: `${window.location.protocol}//${window.location.host}`
				}
				let token = uni.getStorageSync("token")
				// console.log(token)
				uni.request({
					url: "/api/system/chongzhi",
					method: "GET",
					data,
					header: {

						// //返回数据类型
						//   "content-type":" application/json; charset=utf-8",
						token: uni.getStorageSync("token")
					},
					success(res) {
						
						// console.log(res);
						location.href = res.data.data.url
					}
				})
			},
			chongzhi(index) {
				this.itemActive = index
				this.list = this.recharge[index]
				
			},
			comes() {
				this.show = false
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>
<style type="text/css">
	@import url("../../static/icon2/style.css");
</style>
<style>
	.demo {
		width: 100vw;
		height: 100vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.cz_top {
		width: 100%;
		height: 20vw;
		background-color: #ffffff;
		margin-top: 5vw;
	}

	.top {
		width: 100%;
		height: 7vw;
	}

	.btn {
		width: 100%;
		height: 13vw;
		display: flex;
	}
.demo_tops{
				width: 100%;
				height: 10vw;
				display: flex;
			}
			.demos_zuo{
				width: 15vw;
				height: 100%;
				text-align: center;
				line-height: 10vw;
				font-size: 4vw;
			}
	.btn_left {
		width: 15%;
		height: 100%;
		/* 	border-radius: 50%;
		overflow: hidden; */
	}

	.btn_right {
		width: 85%;
		height: 100%;
	}

	.tan {
		width: 100%;
		height: 10vw;
	}

	.danxuan {
		width: 100%;
		height: 25vw;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.zfb {
		width: 70vw;
		height: 25vw;
		margin-top: 2vw;
		border: 1px solid #ccc;
		border-radius: 3vw;
	}

	.zfbs {
		width: 70vw;
		height: 25vw;
		margin-top: 2vw;
		background-color: mediumaquamarine;
		border: 1px solid #ccc;
		border-radius: 3vw;
		color: #ffffff;
	}

	.cz_btn {
		width: 100%;
		height: 20vw;
	}

	.czs_btn {
		width: 100%;
		height: 40vw;
		display: flex;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		padding-left: 30rpx;
	}

	.rechs {
		width: 23vw;
		height: 10vw;
		line-height: 10vw;
		border: 1px solid #ccc;
		margin: 0 30rpx;
		box-sizing: border-box;
	}

	.activ {
		background-image: linear-gradient(to right, #868f96 0%, #596164 100%);
		color: #ffffff;
	}

	.cz_center {
		width: 100%;
		height: 60vw;
		margin-top: 3vw;
		background-color: #ffffff;
	}

	.chongzhi {
		width: 100%;
		height: 10vw;
		display: flex;
		font-size: 6vw;
		line-height: 10vw;
	}

	.chongzhi input {
		width: 70vw;
		height: 10vw;
		color: #ccc;
	}

	.cz_btns {
		width: 100%;
		height: 30vw;
	}
</style>